<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="../vue.js" charset="utf-8"></script>
      </head>
      <body>
        <div id="demo">
            <slot-parent :items="items">
                <p v-for="item in items" :slot="item">{{item}}</p>
            </slot-parent>
        </div>
        <script type="text/x-vue-template" id="slot-parent-template">
            <ul>
                <li v-for="item in items">
                    <h1>{{item}}</h1>
                    <slot :name="item"></slot>
                </li>
            </ul>
        </script>
      </body>
      <script type="text/javascript">
        Vue.component('slot-parent',{
            props:['items'],
            template:"#slot-parent-template"
        });

        var vm = new Vue({
            el:"#demo",
            data:{
                items:[1,2,3,4,5]
            }
        });
      </script>
</html>